<template>
  <div id="sign" v-if="show">
    <div class="bg" @click="showModal" v-if="show"></div>
    <div class="modal">
      <div class="modal-top">
        <div class="modal-title">上传头像</div>
        <div class="modal-clear" @click="clear">
          <img src="../assets/imgs/shanchu.png" alt="" />
        </div>
      </div>
      <div class="addImg">
        <img src="../assets/imgs/add.png" alt="" />
        <input type="file" class="ipt-file" @change="addImg($event)" />
        <img :src="url" alt="" />
      </div>
      <div class="sign-btns">
        <div class="pay" @click="confirm()">确定</div>
        <div class="clear" @click="clear">取消</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "imgModal",
  data() {
    return {
      show: false,
      modal: [{}, {}, {}, {}, {}, {}],
      url: "",
      serverUrl: "",
    };
  },
  mounted() {
    this.getRem(1920, 100);
  },
  methods: {
    selMoney(index) {
      console.log([...this.modal]);
      let res = [...this.modal].find((item) => index == item.index);
      console.log(res);
    },
    //显隐模态窗
    showModal() {
      this.show = !this.show;
    },
    //叉
    clear() {
      this.show = false;
    },
    // 添加头像
    addImg(e) {
      console.log(e);
      let fileLen = e.target.files.length;
      console.log(fileLen);
      for (let i = 0; i < fileLen; i++) {
        let file = e.target.files[i];
        console.log(file);
        let reader = new FileReader();
        reader.readAsDataURL(file);

        reader.onload = (e) => {
          this.url = e.target.result;
          //上传到服务器
          this.$post(`/laiwen/upload/file/baseimage`, this.url).then((res) => {
            this.serverUrl = res.downUrl;
          });
        };
      }
    },
    //确定
    confirm() {
      this.show = false;
      this.$emit("sendUrl", this.serverUrl);
      console.log(this.serverUrl)
    },
  },
};
</script>

<style scoped>
#sign {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: absolute;
  left: 0;
  top: 0;
}

.addImg {
  width: 3rem;
  height: 3rem;
  background: rgba(255, 255, 255, 1);
  opacity: 1;
  margin-top: 0.32rem;
  align-items: center;
  justify-content: center;
  color: #f4f4f4;
  display: flex;
  font-size: 0.5rem;
  cursor: pointer;
  position: relative;
}
img {
  width: 100%;
  height: 100%;
  position: absolute !important;
  object-fit: cover;
}
.ipt-file {
  width: 3rem;
  height: 3rem;
  cursor: pointer;
  position: absolute;
  top: 0;
  z-index: 1;
  opacity: 0;
}
.bg {
  width: 100%;
  height: 100%;
  opacity: 0.25;
  background: black;
  position: absolute;
  z-index: 1;
}
.modal {
  width: 5rem;
  height: 5.52rem;
  display: flex;
  align-items: center;
  position: relative;
  flex-direction: column;
  top: 1.8rem;
  z-index: 9999;
  background: white;
  border-radius: 0.05rem;
}
.modal .modal-top {
  width: 100%;
  height: 0.64rem;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding-left: 0.32rem;
  position: relative;
  border-bottom: 0.01rem solid #f5f5f5;
}
.modal .modal-top .modal-title {
  width: 0.7rem;
  height: 0.2rem;
  font-size: 0.14rem;
  font-family: PingFang SC;
  font-weight: 400;
  line-height: 0.2rem;
  color: rgba(40, 40, 40, 1);
  opacity: 1;
}
.modal .modal-top .modal-clear {
  width: 0.11rem;
  height: 0.11rem;
  cursor: pointer;
  position: absolute;
  right: 0.32rem;
}
.modal-btns {
  width: 4.35rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-top: 0.72rem;
}
.modal-btns::after {
  content: "";
  width: 0.88rem;
}
.modal .modal-single {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin-bottom: 0.24rem;
  width: 1.3rem;
  height: 0.96rem;
  background: rgba(255, 255, 255, 1);
  opacity: 1;
  cursor: pointer;
  border-radius: 0.05rem;

  background: #eeeeee;
  color: #282828;
}
image {
  width: 100%;
  display: block;
  height: 100%;
}
.modal-text {
  width: 0.42rem;
  height: 0.2rem;
  font-size: 0.14rem;
  font-family: PingFang SC;
  font-weight: 400;
  line-height: 0.2rem;
  color: rgba(9, 9, 9, 1);
  opacity: 1;
}
.modal-btn {
  width: 0.88rem;
  height: 0.78rem;
  background: rgba(238, 238, 238, 1);
  opacity: 1;
  border-radius: 0.05rem;
  margin-top: 0.08rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}
.gift-icon {
  font-size: 0.16rem;
}
.modal-btn .gift-icon {
  width: 0.31rem;
  height: 0.31rem;
  margin-top: 0.13rem;
  font-size: 0.16rem;
}
.gift-text {
  margin-top: 0.07rem;
  height: 0.2rem;
  font-size: 0.14rem;
  font-family: PingFang SC;
  font-weight: 400;
  line-height: 0.2rem;
  opacity: 1;
}
.sign-btns {
  width: 100%;
  display: flex;
  position: absolute;
  bottom: 0;
  height: 0.84rem;
  align-items: center;
  border-top: 0.01rem solid #f5f5f5;
  justify-content: center;
}
.pay {
  width: 1.22rem;
  height: 0.38rem;
  background: rgba(255, 189, 61, 1);
  opacity: 1;
  border-radius: 0.05rem;
  font-size: 0.14rem;
  font-family: PingFang SC;
  font-weight: 400;
  line-height: 0.38rem;
  cursor: pointer;
  text-align: center;
  color: rgba(255, 255, 255, 1);
  opacity: 1;
  outline: none;
  margin-right: 0.2rem;
}
.clear {
  width: 1.22rem;
  height: 0.38rem;
  background: white;
  opacity: 1;
  border-radius: 0.05rem;
  cursor: pointer;
  font-size: 0.14rem;
  font-family: PingFang SC;
  font-weight: 400;
  line-height: 0.38rem;
  border: 0.01rem solid rgba(153, 153, 153, 1);
  text-align: center;
  color: #282828;
  opacity: 1;
}
.clear-btn {
  width: 0.24rem;
  height: 0.24rem;
  border-radius: 50%;
  opacity: 1;
  position: absolute;
  right: -0.24rem;
  top: 0.18rem;
  cursor: pointer;
}
/* 选中后的样式 */
.selected {
  color: #ffbd3d;
  border: 0.01rem solid #ffbd3d;
}
</style>
